<!--
 * @Description: 显示同比 环比UI视图
 * @Author bianpengfei
 * @create 2021/12/24 14:26
 -->
<!--default-->
<script>
export default { name: 'ce-card' }
</script>

<!--setup-->
<script setup>
import CeCardItem from './ce-card-item/'
import { computed, reactive } from 'vue'

const props = defineProps({
  span: {
    type: Number,
    default: 3
  },
  data: {
    type: Array,
    default: () => [
      [
        { label: '住院收入', value: 0, unit: '元' },
        { label: '日同比；', value: 0, trend: '', unit: '' },
        { label: '科室排名；', value: 14 }
      ]
    ]
  }
})

const dataListC = computed(() => {
  const { data, span } = props
  const times = data.length % span == 0 ? ~~(data.length / span) : ~~(data.length / span) + 1
  return [...new Array(times)].map((v, vi) => {
    const startIdx = span * vi
    return [...new Array(span)].map((o, oi) => {
      return data?.[startIdx + oi] || []
    })
  })
})
defineEmits({})
const state = reactive({})
</script>

<!--render-->
<template>
  <div>
    <div v-for="(item, index) in dataListC" :key="index" class="ce-card">
      <ce-card-item
        v-for="(cItem, cIndex) in item"
        :key="cIndex"
        :data="cItem"
        :border="!!(item[cIndex + 1] && item[cIndex + 1].length)"
      ></ce-card-item>
    </div>
  </div>
</template>

<!--style-->
<style scoped lang="less">
.ce-card {
  line-height: 0.6rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0.1rem;
  padding: 0.2rem;
  background: #fff;
}
</style>
